<template>
    <div class="herdermiddle">
            
            <router-view></router-view> 
            <div class="recommend  Classificationrightapp">
            <div class="personalinformation">

                <div class="personalinformation-brief">
                    <div class="brief-img">
                      <img src="https://gitee.com/Cezzz/image2_repo/raw/master/img/20220114172154.jpg" alt="">
                    </div>
                    <div class="brief-name">CJ Yu</div>
                    <div class="brief-constellation">白羊座</div>
                </div> 
                <div class="personalinformation-dynamiclikecategories">
                     <div class="personalinformation-dynamic">
                    <a href="#">
                        <div class="Dynamicrline">Dynamic</div>
                        <div class="Dynamicline-num">10</div>
                    </a>
                </div>
                <div class="personalinformation-like">
                    <a href="#">
                        <div class="Likeline">Like</div>
                        <div class="Likenum">10</div>
                    </a>
                </div>
                <div class="personalinformation-categories">
                    <a href="#">
                        <div class="Likeline">Categories</div>
                        <div class="Likenum">10</div>
                    </a>
                </div>
                </div>
                <a class="personalinformationgithub" href="#" target="_blank" rel="noopenner">
                    <i class="el-icon-ship"></i>
                    <span class="FollowMegithub">Follow Me</span>
                </a>
               
            </div>

            <div class="announcement">
                <div class="announcementico">
                    <i class="el-icon-message-solid announcementicomessageico"></i>
                    <span class="Announcementspan">Announcement</span>
                </div>
                <div>This is my Blog</div>
            </div>

            <div class="Theblogisrecommended">
                <div class="Therecentpostsoutlineborder">
                    <div class="Theblogisrecommendedtileico">
                        <i class="el-icon-s-order"></i>
                        <span>Recent Post</span>
                    </div>

                    <div class="Theblogisrecommendedlist">
                        <!-- 分类 -->
                        <div class="Theblogisrecommendedlistitemimg" v-for="(item) in a" :key="item.pk"  >
                            <router-link  :to="{name:'publishArticlecontent',query:{id:item.pk}}" class="Theblogisrecommendedlistitemimga"><img src="https://gitee.com/Cezzz/image2_repo/raw/master/img/20220114172154.jpg"></router-link>
                            
                            <div class="Theblogisrecommendedlistitem" >
                                <router-link  :to="{name:'publishArticlecontent',query:{id:item.pk}}" >{{item.fields.title}}</router-link>
                                <time>{{item.fields.create_time}}</time>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="classifyoutlineborder">
                    <div class="classifyoutlineborderheader">
                        <i class="el-icon-s-cooperation"></i>
                        <span>Categories</span>
                    </div>
                    <ul class="classifyoutlineborderlist">
                        <li class="classifyoutlineborderlistitme">
                            <a href="#" class="classifyoutlineborderlistitmea">
                            <span class="classifyoutlinebordername">前端</span>
                            <span class="classifyoutlinebordernum">1</span>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="infoframeheader">
                    <div class="infoheaderico">
                        <i class="el-icon-s-promotion"></i>
                        <span>Info</span>
                    </div>

                    <div class="webinfo">
                        <div class="webinfoconter">
                            <div class="webinfocontername">Article :</div>
                            <div class="webinfoconternum">10</div>
                            
                        </div>
                        
                    </div>
                </div>
                
            </div>
            <!-- 最近帖子 -->
        </div>
    </div>
</template>

<script>
export default {
    name:"Middle",
    data(){
        return{
            a:null,//这是在后端获取到的博客信息
        }
    },
    created () {
        this.$bus.$on('boketitle',(data)=>{
            this.a=data
        })
    },
    beforeDestroy () {
        this.$bus.$off('boketitle')
    }
}
</script>

<style>
/* 右侧推荐 */
@media screen and (max-width:768px){
    .Classificationrightapp{
        display: none !important;
    }
}
@media screen and (max-width:768px){
    .dynamic{
        -webkit-box-orient: vertical !important;
        -moz-box-orient: vertical !important;
        -o-box-orient:vertical !important;
        -ms-flex-direction: column !important;
        -webkit-flex-direction:column !important;
        flex-direction: column !important;
        height: auto !important;
    }
    
}
@media screen and (max-width:768px){
    .dynamiccontent{
        width: 100% !important;
        height: 230px !important;
    }
}
@media screen and (max-width:768px){
    .contenttop{
        order: 1;
        width: 100% !important;
        padding: 20px 20px 30px !important;
    }
}
@media screen and (max-width:768px){
    .herdermiddle{
        padding: 20px 5px !important;
    }
}
@media screen and (max-width:768px){
    .contenta{
        color: #333135;
        
    }
}
@media screen and (max-width:900px){
    .herdermiddle > div:first-child{
        width: 100% !important;
    }
}
.paginationdiva i:active{
    left: 100%;
    transition: ease-in-out 1s;
}
.paginationdiva i:hover{
    left: 70%;
    transition: ease-in-out 1s;
}
.paginationdiv a:hover{
    background-color: #ff7242;
    color: #fff;
}
.paginationdiva i{
    position: absolute;
    transition: all ease-in-out 1s;
    left: 20%;
    top: 30%;
}
.paginationdiva{
    display: inline-block;
    margin: 0 6px;
    width: 2.5em;
    height: 2.5em;
    
    overflow: hidden;
    line-height: 2.5em;
    background: #fff;
    border-radius: 8px;
    transition: all 1s;
    position: relative;
}
.paginationdiv{
    margin-top: 20px;
    text-align: center;
    
}
.webinfoconternum{
    display: block;
}
.webinfocontername{
    flex: 1;
    padding-right:20px ;
    -webkit-box-flex:1 ;
    box-sizing: border-box;
}
.webinfoconter{
    position: relative;
    display: flex;
    
    overflow: hidden;
    -webkit-box-align: center;
    padding: 2px 10px 0;
    align-items: center;
    box-sizing: border-box;
}
.infoheaderico span{
    padding-left:3px ;
}
.infoheaderico{
    font-size: 1.2em;
    padding-bottom: 6px;
    display: block;
    box-sizing: border-box;
}
.infoframeheader{
    position: relative;
    overflow: hidden;
    
    width: 100%;
    transition: all 1s;
    box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05);
    padding: 20px 24px;
    background: #fff;
    margin-top: 20px;
    border-radius: 8px;
}
.classifyoutlineborderlistitme a:hover{
    background: #80c2ee;
    
    transition: all ease-in-out 0.5s;
    transform: scale(0.96);
    
}

.classifyoutlinebordernum{
    display: inline-block;
    width: 20%;
    text-align: right;
    vertical-align: bottom;
    overflow: hidden;
}
.classifyoutlinebordername{
    width: 80%;
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
}
.classifyoutlineborderlistitmea{
    width: 100%;
    
    display: inline-block;
    padding: 3px 10px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition:all 0.4s;
    overflow-wrap: break-word;
}
.classifyoutlineborderlist{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: block;
}
.classifyoutlineborderheader span{
    margin-left: 3px;
    
}
.classifyoutlineborderheader{
    padding-bottom:6px ;
    font-size: 1.2em;
    display: block;
}
.classifyoutlineborder{
    position: relative;
    overflow: hidden;
    margin-top: 20px;
    padding: 20px 24px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05);
    transition: all 0.3s;
    -ms-transition:all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
}
/* 分类 */
.Theblogisrecommendedlistitem time{
    display: block;
    font-size: 85%;
}
.Theblogisrecommendedlistitem a{
    color: #4c4948;
    font-size: 95%;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    display: block;
}
.Theblogisrecommendedlistitem{
    -webkit-box-flex: 1;
    flex: 1;
    padding-left:10px;
    word-break: break-all;
}
.Theblogisrecommendedlistitemimga img:hover{
    transform: scale(1.2);
    transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    
}
.Theblogisrecommendedlistitemimga img{
    width: 100%;
    height: 100%;
    transition: filter 375ms ease-in-out 1s, transform 1s;
    object-fit: cover;
}
.Theblogisrecommendedlistitemimga{
    width: 4.2em;
    height: 4.2em;
    overflow: hidden;
    border-radius: 5px 0 0 5px;
    
}
.Theblogisrecommendedlistitemimg{
    
    border-bottom: 1px dashed #f5f5f5;
    padding-top: 0;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    padding: 6px 0;
}
.Theblogisrecommendedtileico span{
    padding-left: 3px;
}
.Theblogisrecommendedtileico{
    padding-bottom: 6px;
    font-size: 1.2em;
    
}
.Therecentpostsoutlineborder{
    position: relative;
    overflow: hidden;
    padding: 20px 24px;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition:all 1s;
    box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05);
    -webkit-box-shadow:0 3px 8px 6px rgba(7,17,27,0.05);
    margin-top: 20px;
    border-radius: 8px;
    background: #fff;
}
.Theblogisrecommended{
    display: flex;
    position: sticky;
    transition: top 0.3s;
    top: 20px;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient:vertical;
    position: -webkit-sticky;
    flex-direction: column;
    font-size: 14px;
    -o-transition: top 0.3s;
    -ms-transition: top 0.3s;
}
/* 个人信息 */
.Announcementspan{
    padding-left: 3px;
}
.announcementicomessageico:hover{
    transform: rotate(-10deg) rotate(30deg);
    transition: all .2s;
}
.announcementico{
    padding-bottom: 6px;
    font-size: 1.3em;
}
.announcement{
    position: relative;
    overflow: hidden;
    margin-top: 20px;
    padding: 20px 24px;
    box-shadow:0 3px 8px 6px rgba(7,17,27,0.05);
    transition: all 0.3s;
    background: #fff;
    border-radius: 8px;
}
.FollowMegithub{
    padding-left: 10px;
}
.personalinformationgithub:hover{
    transition: all ease-in-out 2s;
    background-color:#24292f;
    color: #fff;
}
.personalinformationgithub{
    display: block;
    margin-top: 14px;
    background-color: #49b1f5;
    text-align: center;
    line-height: 2.4;
    
}
.Dynamicline-num,.Likenum{
    margin-top: -0.42em;
    color: #1f2d3d;
    font-size: 1.4em;
}
.Dynamicrline,.Likeline{
    color:#4c4948;
    font-size: 1em;
}
.personalinformation-dynamic{
    display: table-cell;
}
.personalinformation-like{
    display:table-cell;
}
.personalinformation-categories{
    display: table-cell;
}
.personalinformation-dynamiclikecategories{
    display: table;
    margin: 14px 0 4px;
    width: 100%;
    table-layout: fixed;
    text-align: center;
}
.brief-constellation{
    margin-top: -0.42em;
}
.brief-name{
    font-weight: 500;
    font-size: 1.6em;
    color: #4c4948;
}
.brief-img img{
    width: 100%;
    height: 100%;
    -webkit-transition: filter 375ms ease-in 0.2s;
    -moz-transition: filter 375ms ease-in 0.2s, -moz-transform 0.3s;
    -o-transition: filter 375ms ease-in 0.2s, -o-transform 0.3s;
    -ms-transition: filter 375ms ease-in 0.2s, -ms-transform 0.3s;
    transition: filter 375ms ease-in-out 0.2s, transform 0.3s;
    object-fit: cover;
}
.brief-img img:hover{
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    
}
.brief-img{
    overflow: hidden;
    margin: 0 auto;
    width: 110px;
    height: 110px;
    border-radius: 70px;
    
}
.personalinformation-brief{
    text-align: center;
    
}
.recommend{
    padding-left: 15px;
    width: 26%;
    box-sizing: border-box;
    
}
.personalinformation:first-child{
    margin-top: 0;
}
.personalinformation{
    box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05);
    position: relative;
    overflow: hidden;
    padding: 20px 24px;
    border-radius: 8px;
    background: #fff;
    
    transition: all 0.3s;
}
/* 中间部分 */
    .dynamic:hover .contentimg{
        transition: 2s;
        transform: scale(1.2);
    }
    .contenta:hover{
        transition: all 0.3s;
        color:#49b1f5;
    }
    .contenttimeCreated{
        margin: 0 8px 0 0;
    }
    .contenttimeico{
        margin: 0 8px 0 0;

    }
    .contenttime{
        margin: 6px 0;
        color: #858585;
        font-size: 90%;
    }
    .contenta{
        font-size: 1.78em;
        line-height: 1.4;
        -webkit-line-clamp: 2;
        transition: all 0.2s ease-in-out;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .contenttop{
        padding: 0 40px;
        width: 57%;
    }
    .maincontent{
        
        width: 74%;
        transition: all 0.2s;
        
    }
    .herdermiddle{
        flex: 1 auto;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        padding: 40px 15px;
    }
    .dynamic{
        display: flex;
        flex-direction: row;
        -webkit-box-align: center;
        align-items: center;
        overflow: hidden;
        height: 18em;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05);
    }
    .dynamic:not(:first-child){
        margin-top: 20px;
    }
    .dynamiccontent{
        overflow: hidden;
        /* border-radius: 8px; */
        width: 44%;
        height: 100%;
    }
    .contentimg{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>